import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSpaceModule } from 'ng-zorro-antd/space';

@Component({
  selector: 'app-space-align',
  standalone: true,
  imports: [NzButtonModule, NzIconModule, NzSpaceModule],
  template: `
    <div class="demo" style="display: flex; align-items: flex-start;">
      <nz-space style="border: blue 1px solid">
        <ng-container *nzSpaceItem>文本</ng-container>
        <button nz-button nzType="primary" *nzSpaceItem>
          <span nz-icon nzType="upload"> </span>
          上传数据
        </button>
        <div class="demo-div" *nzSpaceItem>Block</div>
      </nz-space>

      <nz-space nzAlign="center" style="border: blue 1px solid">
        <ng-container *nzSpaceItem>文本</ng-container>
        <button nz-button nzType="primary" *nzSpaceItem>
          <span nz-icon nzType="upload"> </span>
          上传数据
        </button>
        <div class="demo-div" *nzSpaceItem>Block</div>
      </nz-space>

      <nz-space nzAlign="baseline" style="border: blue 1px solid">
        <ng-container *nzSpaceItem>文本</ng-container>
        <button nz-button nzType="primary" *nzSpaceItem>
          <span nz-icon nzType="upload"> </span>
          上传数据
        </button>
        <div class="demo-div" *nzSpaceItem>Block</div>
      </nz-space>

      <nz-space nzAlign="end" style="border: blue 1px solid">
        <ng-container *nzSpaceItem>文本</ng-container>
        <button nz-button nzType="primary" *nzSpaceItem>
          <span nz-icon nzType="upload"> </span>
          上传数据
        </button>
        <div class="demo-div" *nzSpaceItem>Block</div>
      </nz-space>
    </div>
  `,
  styles: `
  .demo-div {
    width: 100px;
    height: 100px;
    background: #ccc;
    line-height: 80px;
  }
  `,
})
export class SpaceAlignComponent {}
